import React from "react"
import { ClockCircleOutlined } from '@ant-design/icons';
import { Divider, Popconfirm, Tag } from "antd";

const orderStatus = [
  {text: '待确认', value: 'un_pay'},
  {text: '待支付', value: 'submitted'},
  {text: '支付中', value: 'paying'},
  {text: '已取消', value: 'canceled'},
  {text: '已支付', value: 'paid'},
  {text: '已超时', value: 'timeout'},
]


const columns = ({onRead, onDelete}) => [
  {
    title: '标题',
    dataIndex: 'title',
    width: 200,
    key: 'title',
  },
  {
    title: '内容',
    dataIndex: 'content',
    key: 'content',
    render: (text, row) => <div className={'content-cell '}>
      {text}
      <div>
        <Tag className={'weight'}><ClockCircleOutlined /> {row.createTime}</Tag>
        <Divider type="vertical"/>
        {row['status'] === 'unread' ? <a onClick={() => onRead(row)}>标记为已读</a> : <span>已读</span>}
        <Divider type="vertical"/>
        <Popconfirm title={<div>确认取消订单 [<b className={'line-stress'}>{row.orderNo}</b>] 吗?</div>}
                    placement="left"
                    onConfirm={() => onDelete(row)}>
          <a>删除</a>
        </Popconfirm>
      </div>
    </div>
  }]

export default columns